<template>
  <a class="number-keyboard-key" :class="{'no-number-key': notNumber, 'vertical-key': isvertical}" @click="handleEnter">
    <slot>
      {{keyvalue}}
    </slot>
  </a>
</template>
<style>
/* 单个键-数值 */
.number-keyboard-key {
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
  width: 33.33%;
  height: 140px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-size: 60px;
  font-weight: bold;
}
/* 竖直的键 */
.vertical-key {
  width: 100%;
  height: 240px;
}
/* 单个键-数值-激活时 */
.number-keyboard-key:active {
  background-color: #d8dfe1;
}
/* 撤销键 */
.no-number-key {
  background-color: #d8dfe1;
}
/* 撤销键-激活时 */
/* .no-number-key:active {
  background-color: #D8DFE1;
} */
</style>
<script>
export default {
  props: {
    // 键值
    keyvalue: {
      type: String,
      required: true
    },
    // 是否为垂直键
    isvertical: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let realValue = parseFloat(this.keyvalue)
    let notNumber = isNaN(realValue)
    return {
      realValue,
      notNumber
    }
  },
  methods: {
    handleEnter() {
      if (this.notNumber) {
        this.$emit('input', this.keyvalue)
      } else {
        this.$emit('input', this.realValue)
      }
    }
  }
}
</script>
